<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .banner {
      position: relative;
    }

    .banner .images {
      position: relative;
      height: 550px;
    }

    .banner .images .item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      overflow: hidden;

      opacity: 0;
      transition: opacity 1000ms ease;
    }

    .banner .images .item.active {
      opacity: 1;
    }

    .banner .images .item img {
      position: relative;
      transform: translate(-50%);
      left: 50%;
      width: 1920px;
      height: 550px;
    }

    .indicator {
      position: absolute;
      display: flex;
      bottom: 42px;
      left: 0;
      right: 0;
      justify-content: center;
    }

    .indicator .item {
      width: 8px;
      height: 8px;
      margin: 0 5px;
      border-radius: 50%;
      background-color: #aaa;
      cursor: pointer;
    }

    .indicator .item.active {
      background-color: red;

    }
  </style>
</head>

<body>

  <div class="banner">
    <ul class="images">
    </ul>
    <div class="control">
      <button class="prev">上一个</button>
      <button class="next">下一个</button>
    </div>
    <div class="indicator">

    </div>
  </div>

  <script src="./json/banner_data.js"></script>
  <script>
    var bannersCount = banners.length

    // 0.banner的serverURL
    var bannerServerURL = "https://res.vmallres.com/"

    // 1.根据数据动态添加页面内容
    // 1.1 动态添加轮播图图片数据
    var imagesEl = document.querySelector(".images")
    var activeItemEl = null
    for (var i = 0; i < banners.length; i++) {
      // 获取数据
      var banner = banners[i]

      // 创建li元素
      var itemEl = document.createElement("li")
      itemEl.classList.add("item")
      if (i === 0) {
        itemEl.classList.add("active")
        activeItemEl = itemEl
      }
      imagesEl.append(itemEl)

      // 创建img元素
      var imgEl = document.createElement("img")
      imgEl.src = `${bannerServerURL}${banner.imgUrl}`
      itemEl.append(imgEl)
    }

    // 1.2 动态添加指示器内容
    var indicatorEl = document.querySelector('.indicator')
    for (var i = 0; i < bannersCount; i++) {
      var itemEl = document.createElement('div')
      itemEl.classList.add('item')
      if (i === 0) {
        itemEl.classList.add('active')
      }
      indicatorEl.append(itemEl)

      // 监听指示器item的点击
      itemEl.index = i
      itemEl.onclick = function(){
        previousIndex = currentIndex
        currentIndex = this.index
        switchBannerItem()
      }
    }


    // 2.监听按钮的点击
    var previousIndex = 0
    var currentIndex = 0
    var controlEl = document.querySelector(".control")
    var prevBtnEl = controlEl.querySelector(".prev")
    var nextBtnEl = controlEl.querySelector(".next")
    prevBtnEl.onclick = function () {
      // 找到上一个
      previousIndex = currentIndex
      currentIndex--
      if (currentIndex === -1) {
        currentIndex = bannersCount - 1
      }

      // 让currentIndex变成active状态, 让previous变成普通的状态
      switchBannerItem()
    }
    nextBtnEl.onclick = function () {
      nextSwitch()
    }

    // 3.自动轮播效果
    var timer = null
    startTimer()

    // 4.暂停自动轮播
    var bannerEl = document.querySelector('.banner')
    bannerEl.onmouseenter = function () {
      console.log("------onmouseenter")
      stopTimer()
    }
    bannerEl.onmouseleave = function () {
      startTimer()
    }

    // 对功能封装的函数
    // 封装到函数: switchBannerItem
    function switchBannerItem() {
      var currentItemEl = imagesEl.children[currentIndex]
      var previousItemEl = imagesEl.children[previousIndex]
      previousItemEl.classList.remove("active")
      currentItemEl.classList.add("active")
      // 切换指示器的item
      var currentInItemEl = indicatorEl.children[currentIndex]
      var previousInItemEl = indicatorEl.children[previousIndex]
      previousInItemEl.classList.remove("active")
      currentInItemEl.classList.add("active")
    }

    // 封装到函数: 播放下一个
    function nextSwitch() {
      // 找到下一个
      previousIndex = currentIndex
      currentIndex++
      if (currentIndex === bannersCount) {
        currentIndex = 0
      }

      // 让currentIndex变成active状态, 让previous变成普通的状态
      switchBannerItem()
    }

    // 封装到函数: 开启定时器
    function startTimer() {
      timer = setInterval(function () {
        nextSwitch()
      }, 3000);
    }
    function stopTimer() {
      console.log("timer:", timer)
      clearInterval(timer)
    }
  </script>

</body>

</html>